<template>
  <div class="rec-card" v-if="data">
    <div class="rec-photo-area">
      <img :src="data.avatar"  class="rec-photo" />
    </div>
    <div class="rec-detail">
      <p class="detail-line">
        <span>{{ data.name }}</span>
        <span class="info-tag" v-if="data.height">{{ data.height }}</span>
        <span class="info-tag" v-if="data.age">{{ data.age }}</span>
      </p>
      <p class="detail-line">
        <img src="src/assets/img/xueli_active.png" :class="{
          'status-tag': true, 'disabled': !data.xueli
        }" />
        <img src="src/assets/img/house_active.png" :class="{
          'status-tag': true, 'disabled': (data?.houseNum ?? 0) < 1
        }" />
        <img src="src/assets/img/assets_active.png" :class="{
          'status-tag': true, 'disabled': (data?.income ?? 0) < 150000
        }" />
        <span class="spacer"></span>
        <img src="src/assets/img/love_active.png" class="status-tag love" :class="{
          'status-tag': true, 'disabled': !data.favor
        }" />
      </p>
      <p class="detail-line">
        <span>{{ data.profession }}</span>
      </p>
      <p class="detail-line">
        <span class="desc">{{ data.desc }}</span>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

/** 推荐信息 */
export type RecommendData = {
  id: number;
  /** 用户名 */
  name: string;
  /** 头像 */
  avatar: string;
  /** 年龄 */
  age: number
  /** 身高 */
  height?: number;
  /** 职业 */
  profession?: string;
  /** 学历 */
  xueli?: string;
  /** 房产数 */
  houseNum?: number;
  /** 收入，单位元 */
  income?: number;
  /** 是否点亮 */
  favor?: boolean;
  /** 自我介绍 */
  desc?: string;
}

export default defineComponent({
  props: {
    data: {
      type: Object as PropType<RecommendData>,
      default: null
    }
  },
  setup() {

  },
})
</script>


<style lang="stylus" scoped>
@import '../../../styles/mixin.styl'

$cardHeight = 3.1rem

.rec-card
  Flex(row, flex-start)
  width 100%
  margin-top 10px
  height $cardHeight
  border-radius .32rem
  box-shadow: 12px 26px 50px rgba(90, 108, 234, 0.07);
  overflow hidden
  .rec-photo-area
    width $cardHeight
    height $cardHeight
    border-radius .32rem
    overflow hidden
    .rec-photo
      width 100%
  .rec-detail
    flex 1
    padding .2rem
    font-size .28rem
    .info-tag
      padding .1em .7em
      margin-left  .8em
      border-radius 1rem
      line-height 1
      background #3296DB
      color #fff
    .detail-line
      Flex(row, flex-start, center)
      margin .5em 0 
    .status-tag
      width .4rem
      height .4rem
      display inline-block
      margin-right .1rem
      &.disabled 
        filter grayscale(100%)
    .desc
      font-size .24rem
      // height 3.8em
      display: -webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
      -webkit-line-clamp: 3;// 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow : hidden;
      color #666
      @media screen and (max-width: 320px)
        -webkit-line-clamp: 2;


</style>